<template>
  <div>
    <div style="margin-top: 15px;">
      <el-row style="background-color: white;">
        <el-col :span="4">
          <el-button type="primary" @click="opendialog1">新增成员</el-button>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="请输入成员名称" v-model="MnameKey">
            <el-button slot="append" icon="el-icon-search" @click="findProjectByKey"></el-button>
          </el-input>
        </el-col>
      </el-row>
    </div>
    <template>
      <el-table :data="MallUsers" border style="width: 100%">
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="roleName" label="角色名">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope" type=index>
            <el-button @click="Mremove(scope.row)" type="text" size="small">移除</el-button>
            <el-button @click="MopenChangedialog(scope.row)" type="text" size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <el-dialog title="新增成员" :visible.sync="dialogVisible1" width="45%" :close="closeDialog1">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>员工</span>
        </div>
        <el-checkbox-group v-model="checkMfreeUsers">
          <el-checkbox v-for="freuser in MfreeUsers" :label="freuser.userId" border>
            {{freuser.username}}
          </el-checkbox>
        </el-checkbox-group>
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>角色</span>
        </div>
        <el-radio-group v-model="checkMrole">
          <el-radio v-for="role in Mroles" :label="role.roleId" border>{{role.roleName}}</el-radio>
        </el-radio-group>
      </el-card>
      <el-button @click="dialogVisible1=false">取消</el-button>
      <el-button type="primary" @click="projectBindRole()" style="position: relative; right: -250px;">保存</el-button>
    </el-dialog>

    <el-dialog title="修改成员角色" :visible.sync="dialogVisible2" width="45%" :close="closeDialog2">
      <el-form :model="tmpUser" ref="tmpUser" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户id">
          <el-input type="text" v-model="tmpUser.userId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input type="text" v-model="tmpUser.username" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>角色</span>
          </div>
          <el-radio-group v-model="checkMrole">
            <el-radio v-for="role in Mroles" :label="role.roleId" border>{{role.roleName}}</el-radio>
          </el-radio-group>
        </el-card>
        <el-form-item>
          <el-button @click="dialogVisible2=false">取消</el-button>
          <el-button type="primary" @click="changeMemberInfo('tmpUser')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="Mpages.current"
      :page-sizes="[2, 4, 8, 16]" :page-size="Mpages.size" layout="total, sizes, prev, pager, next, jumper"
      :total="Mpages.total">
    </el-pagination>
  </div>
</template>

<script>

  export default {
    data() {
      return {
        //修改用户时临时用户
        tmpUser: "",

        //选中用户的ids
        checkMfreeUsers: [],
        //选中角色的id;
        checkMrole: "",
        Mroles: "",
        MfreeUsers: "",
        dialogVisible1: false,
        dialogVisible2: false,
        MnameKey: "",
        projectId: "",
        MallUsers: [{
          "projectId": 0,
          "roleId": 0,
          "roleName": "string",
          "userId": 0,
          "username": "string"
        }],
        Mpages: {
          "current": 0,
          "maxLimit": 0,
          "pages": 0,
          "records": [],
          "size": 0,
          "total": 0
        },

      }
    },
    methods: {
      handleSizeChange(val) {
        this.getPageProjectUsers(this.Mpages.current, val, this.MnameKey)
      },

      handleCurrentChange(val) {
        this.getPageProjectUsers(val, this.Mpages.size, this.MnameKey)
      },

      Mremove(tU) {
        this.$http.post("infoIssueProject/rmMember", {
          "projectId": this.projectId,
          "userId": tU.userId
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg);
            this.getPageProjectUsers(this.Mpages.current, this.Mpages.size, this.MnameKey);
          } else {
            this.$message.error(resp.data.msg);
          }
        })

      },


      changeMemberInfo() {
        this.$http.post("issueProjectRoleRel/changeMember", {
          "projectId": this.projectId,
          "roleId": this.checkMrole,
          "userId": this.tmpUser.userId,
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg);
            this.dialogVisible2 = false;
          } else {
            this.$message.error(resp.data.msg);
          }
          this.getPageProjectUsers(this.Mpages.current, this.Mpages.size, this.MnameKey);
        })
      },
      closeDialog2() {
        this.tmpUser = "";
        this.checkMrole = "";
      },

      MopenChangedialog(tUser) {
        this.tmpUser = JSON.parse(JSON.stringify(tUser));
        this.dialogVisible2 = true;
        this.$http.get("issueRole/getRoleList").then(resp => {
          if (resp.data.code == 200) {
            this.Mroles = resp.data.data;
          }
        })
        this.checkMrole = tUser.roleId;
      },

      projectBindRole() {
        console.log("==================");
        console.log(this.projectId);
        this.$http.post("infoIssueProject/projectBindRole", {
          "projectId": this.projectId,
          "roleId": this.checkMrole,
          "userIds": this.checkMfreeUsers
        }).then(resp => {
          if (resp.data.code == 200) {
            this.$message.success(resp.data.msg);
            this.getPageProjectUsers(this.Mpages.current, this.Mpages.size, this.MnameKey);
            this.dialogVisible1 = false;
          } else {
            this.$message.error(resp.data.msg)
          }
        })
      },
      closeDialog1() {
        this.Mroles = "";
        this.MfreeUsers = "";
      },
      findProjectByKey() {
        this.getPageProjectUsers(this.Mpages.current, this.Mpages.size, this.MnameKey);
      },
      //打开新增成员的窗口并查询空闲员工，查询所有角色
      opendialog1() {
        this.dialogVisible1 = true;
        this.$http.get("infoIssueProject/getUsersByRoleIdNull").then(resp => {
          if (resp.data.code == 200) {
            this.MfreeUsers = resp.data.data;
          }
        })
        this.$http.get("issueRole/getRoleList").then(resp => {
          if (resp.data.code == 200) {
            this.Mroles = resp.data.data;
          }
        })
      },
      getPageProjectUsers(pageindex, pagesize, nameKey) {
        this.$http.get("infoIssueProject/getPageProjectUsers", {
          params: {
            "nameKey": nameKey,
            "pageIndex": pageindex,
            "pageSize": pagesize,
            "projectId": this.projectId
          }
        }).then(resp => {
          if (resp.data.code == 200) {
            this.Mpages = resp.data.data;
            this.MallUsers = resp.data.data.records;
          }

        })
      },
      // Mremove(tUser) {
      //   this.$http.post("infoIssueProject/rmMember", {
      //     "projectId": this.projectId,
      //     "roleId": tUser.roleId,
      //     "userId": tUser.userId,
      //   })
      // },
      loaduser() {
        this.user = JSON.parse(localStorage.getItem("com.woniu.loginUser"));
      },
    },
    created() {
      //加载项目id
      this.projectId = sessionStorage.getItem("pid");
      this.loaduser();
      this.getPageProjectUsers(1, 6);
    }

  }

</script>

<style>
</style>
